<template>
    <div>
        <div class="mb20" v-for="(v1, i1) in dataList" :key="i1">
            <div class="table-header">
                <div :class="`table-td table-header-title`">{{ v1[timeType] }}</div>
                <div class="table-td">同比</div>
                <div class="table-td">环比</div>
            </div>
            <div class="table-body">
                <div class="table-tr" v-for="(v2, i2) in (v1.payTaxWarnList||v1.rpInvoiceDataWarningViewModels)||[]" :key="i2">
                    <div class="table-body-title table-td">{{ v2[dataType] }}</div>
                    <div :class="`table-td ${v2[totalType].isRed && 'red-color'}`">{{ v2[totalType]?.value }}</div>
                    <div :class="`table-td ${v2?.changeQoq.isRed && 'red-color'}`">{{ v2?.changeQoq?.value }}%</div>
                    <div :class="`table-td ${v2?.changeYoy.isRed && 'red-color'}`">{{ v2?.changeYoy?.value }}%</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    dataList: { type: Array, default: [] },
    timeType: { type: String, default: '' },
    dataType: { type: String, default: '' },
    totalType: { type: String, default: '' }
})
const newDataList = ref([])
watch(() => props.dataList, () => {
    const obj = {}
    props.dataList.forEach(v => {
        if (obj.hasOwnProperty(`timeType_${v[props.timeType]}`)) {
            obj[`timeType_${v[props.timeType]}`].children.push(v)
        } else {
            obj[`timeType_${v[props.timeType]}`] = {
                children: [v],
                timeType: v[props.timeType],
            }
        }
    })
    newDataList.value = Object.values(obj)
}, { immediate: true, deep: true })
</script>

<style lang="scss" scoped>
.table-header,
.table-tr {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-tr {
    border-bottom: 1px solid #f1f1f1;
}

.table-header {
    border: 1px solid #f1f1f1;
    border-right: none;
}

.table-header-title {
    width: 50% !important;
    background-color: #f1f1f1;
}

.table-body {
    border-left: 1px solid #f1f1f1;
}

.table-td {
    width: 25%;
    padding: 10px 0;
    text-align: center;
    border-right: 1px solid #f1f1f1;
}

.red-color {
    color: red !important;
}

.mt20 {
    margin-top: 20px;
}
</style>